
<template>
  <div class="zichanfenleitongji">
    <div class="top-tools">
      <h3>{{text}}</h3>
      <div class="select-school">
        <span :class="{ active: dataIndex == 0 }" @click="changeIndex(0)">数量</span>
        <span class="line">|</span>
        <span :class="{ active: dataIndex == 1 }" @click="changeIndex(1)">金额</span>
        <span class="select-span">
          <el-select v-model="companyCodes" placeholder="请选择" @change="changeDataVal">
            <el-option
              v-for="item in CompanyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </span>
      </div>
    </div>
    <div>
      <span :class="{ activeColor: timeIndex == 0 }" @click="changeTimeIndex(0)">最近一年</span>
      <span class="line">|</span>
      <span :class="{ activeColor: timeIndex == 1 }" @click="changeTimeIndex(1)">最近半年</span>
      <span class="line">|</span>
      <span :class="{ activeColor: timeIndex == 2 }" @click="changeTimeIndex(2)">最近三个月</span>
    </div>
    <div class="chart-box">
        <!-- {{this.HcUseStatus.countList}} -->
      <div id="hcly"></div>
    </div>
  </div>
</template>

<script>
// 耗材领用情况  面积图和折线图
import { Chart } from "@antv/g2";
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
    props:{
        text:String,
        iShow:Boolean
    },
  data() {
    return {
      dataIndex: 0,
      timeIndex: 0,
      month: "12",
      companyCodes: "01",
      CompanyList: [], //公司下拉数据
      HcUseStatus:[],
    };
  },
  mounted() {
    this.getCompanyList();
    this.getHcUseStatus();
  },
  methods: {
    changeIndex(idx) {
      this.dataIndex = idx;
      if (idx == 0) {
        this.chart.changeData(this.HcUseStatus.countList);
      } else {
        this.chart.changeData(this.HcUseStatus.amountList);
      }
    },
    // 修改筛选条件
    changeTimeIndex(idx) {
      this.timeIndex = idx;
      if (idx == 0) {
        this.month = 12;
        this.changeData();
        
      } else if (idx == 1) {
        this.month = 6;
        this.changeData();
      } else {
        this.month = 3;
        this.changeData();
      }
    },
    //获取公司列表
    getCompanyList() {
      axios
        .get($api.api + "/smart-uttc/assetManage/getCompanyList")
        .then(res => {
          if (res) {
            this.CompanyList = res.data;
          }
        });
    },
    //
    changeDataVal(val) {
      this.companyCodes = val;
      this.changeData();
    },
    // 获取耗材领取情况
    getHcUseStatus() {
      let url = "?companyCodes=" + this.companyCodes + "&month=" + this.month;
      axios
        .get($api.api + "/smart-uttc/assetManage/getHcUseStatus" + url)
        .then(res => {
          if (res) {
            let oldData = res.data;
            oldData.countList[0].map(item => {
              item.value = Number(item.value)
            });
            oldData.amountList[0].map(item => {
              item.value = Number(item.value)
            });
            this.HcUseStatus = oldData;
            this.chartRender();
          }
        });
    },
    // 切换筛选条件之后重新渲染数据
    changeData() {
      let url = "?companyCodes=" + this.companyCodes + "&month=" + this.month;
      axios
        .get($api.api + "/smart-uttc/assetManage/getHcUseStatus" + url)
        .then(res => {
          if (res) {
            let oldData = res.data;
            oldData.countList[0].map(item => {
              item.value = Number(item.value)
            });
            oldData.amountList[0].map(item => {
              item.value = Number(item.value)
            });
            this.HcUseStatus = oldData;
            this.chart.changeData(this.HcUseStatus.countList[0]);
          }
        });
    },
    chartRender() {
      const chart = new Chart({
        container: "hcly",
        autoFit: true,
        height: 270,
        padding: [10, 10, 40, 65],// 上，右，下，左
      });
      chart.data(this.HcUseStatus.countList[0]);
    //   chart.scale("value", {
    //     nice: true,
    //     min: 0
    //   });
      chart.axis("value", {
        label: {
          style: {
            fill: "#fff"
          }
        }
      });
      chart.axis("type", {
        label: {
          style: {
            fill: "#fff",
            fontSize: 14
          }
        }
      });
      chart.tooltip({
        showMarkers: false
      });
      chart.interaction("element-active");
      chart.legend(false);
      chart
        .line()
        .position("key*value")
        .color("type",["#FF5DE4"]);
      chart
        .area()
        .position("key*value")
        .color("type",["#FF5DE4"]);
      chart.render();
      this.chart = chart;
    }
  }
};
</script>

<style lang="scss" scoped>
.zichanfenleitongji {
  padding: 10px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
    .select-school {
      span {
        cursor: pointer;
        color: rgba(255, 255, 255, 0.6);
      }
      .line {
        color: #2a55ff;
        margin: 0px 10px;
      }
      .active {
        color: #00ffee;
      }
      .select-span {
        margin-left: 20px;
      }
    }
  }
  .activeColor {
    color: #00ffee;
    cursor: pointer;
  }
  span {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
  }
  .line {
    color: #2a55ff;
    margin: 0px 10px;
  }
  .chart-box{
      margin-top: 40px;
  }
}
</style>